<template>
  <div>
    <button @click="successXhr">xhr success</button>
    <button @click="errorXhr">xhr error</button>
    <button @click="successFetch">fetch success</button>
    <button @click="errorFetch">fetch error</button>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  methods: {
    successXhr() { 
      // https://httpbin.org 是一个免费的 HTTP 测试和调试服务。
      axios.get('https://httpbin.org/get').then(res => {
        console.log('Axios 成功:', res);
      }).catch(err => {
        console.log('Axios 错误:', err);
      })
    },
    errorXhr() { 
      axios.get('https://httpbin.org/status/500').then(res => {
        console.log('Axios 成功:', res);
      }).catch(err => { 
        console.log('Axios 错误:', err);
      })
    },
    successFetch() { 
      // 使用一个真实可访问的 API 进行测试
      fetch('https://httpbin.org/get').then(res => {
        return res.json()
      }).then(res => {
        console.log('Fetch 成功:', res);
      }).catch(err => {
        console.log('Fetch 错误:', err);
      })
    },
    errorFetch() { 
      // 使用一个会返回 404 的 URL 来模拟错误
      fetch('https://httpbin.org/status/404').then(res => {
        if (!res.ok) {
          throw new Error(`HTTP ${res.status}: ${res.statusText}`);
        }
        return res.json()
      }).then(res => {
        console.log('Fetch 成功:', res);
      }).catch(err => { 
        console.log('Fetch 错误:', err);
      })
    },
  }
}
</script>


